<?php
/**
 * Created by PhpStorm.
 * User: gxk
 * Date: 2019/4/17
 * Time: 20:19
 */
defined('slim') or exit('访问不合法');?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>公共聊天</title>
    <meta name="viewport" content="width=device-width">
    <!-- Bootstrap -->
    <script src="/data/js/jquery.js"></script>
    <script src="/data/layer/mobile/layer.js"></script>
    <link rel="stylesheet" href="/data/css/ini.css">
    <link rel="stylesheet" href="/data/css/animate.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<style type="text/css">
    body{
        height:120rem;
        background-color: black;
        /*background-image:url(/data/image/index_bg.jpg) ;*/
    }
    #messdiv{
        width:100%;
        height:100%;
        border:2px solid pink;

        margin: 0px auto;
        border-radius:20px;
        margin-bottom: 20px;
        /*float:left;*/
        position:relative;
    }
    .title{
        position: fixed;
        top:0;
        height:10rem;
        width: 100%;
        line-height: 10rem;
        font-size: 5rem;
        color: white;
        text-align: center;
        border-bottom:0.5rem solid pink;
    }
    .content{
        position: fixed;
        width: 100%;
        height:75%;
        overflow: auto;
        top: 10rem;
    }
    .chatcontent{
        height:17rem;
        border-bottom: 2px solid pink;
        text-align: center;
    }
    .imp{
        height:10rem;
        overflow-y: auto;
        text-align: center;
        line-height: 10rem;
        font-weight: 600;
        font-size: 3rem;
        color: pink;
    }
    .time{
        height:6rem;
        line-height: 3rem;
        text-align: center;
        font-size: 2rem;
        font-weight: 400;
        color: white;
    }
    .handle{
        width:100%;
        height:10rem;
        bottom:2rem;
        left:4rem;
        line-height: 10rem;
        position:fixed;
        text-align: center;
    }
    #message{
        width:60%;
        height:7rem;
        font-size: 3.5rem;
        border-radius: 1rem;
        border: 0.5rem solid pink;
        vertical-align:middle;
    }
    #send{
        vertical-align:middle;
        background-color: #4CAF50;
        height: 5rem;
        width: 13%;
        text-align: center;
        color: white;
        font-weight: 800;
        font-size:3rem;
        border:none;
        border-radius: 5px;
        cursor:pointer;
    }
    .usercontent{
        text-align: center;
    }

</style>
<?php require_once BASE_PATH_VIEW.'/live2d.php'?>
<body>
<ul class="list-group">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
</ul>
<div id='messdiv'>
    <h1 class="title">WebSocket IM</h1>
    <div class="content">
        <?php if(!empty($list)){?>
            <?php foreach($list as $k=>$v){?>
                <div class="chatcontent">
                    <p class="imp"><?php echo $v->chat_content;?></p>
                    <p class="time"><?php echo $v->add_time;?><br>来自<?php echo $v->chat_ip;?>的一位不愿透露姓名的热心网友:<?php echo $v->chat_user_name;?></p>
                </div>
            <?php }?>
        <?php }?>
    </div>
    <div class="handle">
        <input type="text" name="" id='message'>
        <input type="submit" id='send' value="send">
    </div>
</div>
</body>
<script color="248,248,255" opacity='1' zIndex="-10" count="299" src="/data/js/canvas-nest.js"></script>
    <script src="<?php echo BASE_URL_JS;?>/index.js"></script>
</html>
